

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 角色管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/admin/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/admin/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-block">
              <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">用户昵称</label>
            <div class="layui-input-block">
              <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <table class="layui-table" lay-data="{ url:'/admin/User/userlist',method:'post',where:{status:'2'}, page:true, id:'LAY-user-managet'}" lay-filter="LAY-user-managet">
          <thead>
          <tr>
            <th lay-data="{type: 'checkbox', fixed: 'left'}"></th>
            <th lay-data="{field:'id', width:150, sort: true}">ID</th>
            <th lay-data="{field:'nick'}">昵称</th>
            <th lay-data="{field:'headimg',templet:'#img'}">头像</th>
            <th lay-data="{field:'mobile',templet:'#mobile'}">手机号</th>
            <th lay-data="{field:'email',templet:'#email'}">邮箱</th>
            <th lay-data="{templet:'#money'}">用户余额</th>
              <th lay-data="{field:'reg_time'}">注册时间</th>
              <th lay-data="{field:'rece_login_time'}">最后登录时间</th>
            <th lay-data="{field:'status',templet:'#status'}">状态</th>
            <th lay-data="{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}">操作</th>
          </tr>
          </thead>
        </table>

        <script type="text/html" id="status">
          {{# if(d.status==1){ }}
          正常
          {{# }else if(d.status==2){ }}
          封号
          {{# }else{ }}
          其他
          {{# } }}
        </script>
        <script type="text/html" id="money">
          <span style="color:red;">{{d.money}}</span>
        </script>
        <script type="text/html" id="email">
          {{# if(d.email){ }}
          {{d.email}}
          {{# }else{ }}
          未绑定
          {{# } }}
        </script>
        <script type="text/html" id="mobile">
          {{# if(d.mobile){ }}
          {{d.mobile}}
          {{# }else{ }}
          未绑定
          {{# } }}
        </script>
          <script type="text/html" id="img">
              <img src="{{d.headimg}}" style="height:25px;">
          </script>
        <script type="text/html" id="barDemo">
          {in name="$data.edit" value="$permis"}
            {{# if(d.status==1){ }}
            <a class="layui-btn layui-bg-green layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            {{# } }}
          {/in}
          {in name="$data.info" value="$permis"}
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-href="/admin/User/userinfo?id={{d.id}}" lay-text="{{d.nick}}"><i class="layui-icon layui-icon-search"></i>详情</a>
          {/in}
          {in name="$data.hei" value="$permis"}
            {{# if(d.status==1){ }}
            <a class="layui-btn layui-bg-cyan layui-btn-xs" lay-event="userhei"><i class="layui-icon layui-icon-fonts-del"></i>黑名单</a>
            {{# }else{ }}
            <a class="layui-btn layui-bg-cyan layui-btn-xs" lay-event="jiechu"><i class="layui-icon layui-icon-fonts-del"></i>移除黑名单</a>
            {{# } }}
          {/in}
          {in name="$data.del" value="$permis"}
            {{# if(d.status==1){ }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            {{# } }}
          {/in}
        </script>
      </div>
    </div>
  </div>

 <script src="/admin/layuiadmin/layui/layui.js"></script>
  <script>
  layui.config({
    base: '/admin/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'useradmin', 'table'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;
    
    //搜索角色
    form.on('submit(LAY-user-front-search)', function(data){
        var field = data.field;
        $.post("{:url('admin/User/userlist')}", field, function(data,state){});
        //执行重载
        table.reload('LAY-user-managet', {
            where: field
        });
    });

      //监听工具条
      table.on('tool(LAY-user-managet)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
          var data = obj.data; //获得当前行数据
          var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
          var tr = obj.tr; //获得当前行 tr 的DOM对象
          if(layEvent === 'jiechu'){
              layer.confirm('确定要移除黑名单？', function(index){
                  obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                  layer.close(index);
                  var dataid=data['id'];
                  //向服务端发送删除指令
                  $.post(
                      "{:url('admin/User/setStatus')}",
                      {"id":dataid,"st":1},
                      function(data,state){
                          if(state != "success"){
                              layer.msg("请求出错!");
                          }else if(data.status == 1){
                              table.reload('LAY-user-managet');
                              layer.msg(data.msg);
                          }else{
                              layer.msg(data.msg);
                          }
                      }
                  );
              });
          }else
          if(layEvent === 'userhei'){
              layer.confirm('加入黑名单后用户将无法登录，您确认要将用户加入黑名单吗？', function(index){
                  obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                  layer.close(index);
                  var dataid=data['id'];
                  //向服务端发送删除指令
                  $.post(
                      "{:url('admin/User/setStatus')}",
                      {"id":dataid,"st":2},
                      function(data,state){
                          if(state != "success"){
                              layer.msg("请求出错!");
                          }else if(data.status == 1){
                              table.reload('LAY-user-managet');
                              layer.msg(data.msg);
                          }else{
                              layer.msg(data.msg);
                          }
                      }
                  );
              });
          }else if(layEvent === 'del'){ //删除
              layer.confirm('真的删除当前用户吗', function(index){
                  obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                  layer.close(index);
                  var dataid=data['id'];
                  //向服务端发送删除指令
                  $.post(
                      "{:url('admin/User/deluser')}",
                      {"id":dataid},
                      function(data,state){
                          if(state != "success"){
                              layer.msg("请求出错!");
                          }else if(data.status == 1){
                              table.reload('LAY-user-managet');
                              layer.msg('已删除');
                          }else{
                              layer.msg(data.msg);
                          }
                      }
                  );
              });
          } else if(layEvent === 'edit'){ //编辑
              //do something
              var id=data['id'];
              var nick=data['nick'];
              var headimg=data['headimg'];
              var email=data['email'];
              var mobile=data['mobile'];
              var money=data['money'];
              //do something
              layer.open({
                  type: 2
                  ,title: '修改用户'
                  ,content: 'edit.html'
                  ,maxmin: true
                  ,area: ['500px', '450px']
                  ,btn: ['确定', '取消']
                  ,success: function(layero,index){
                      var body = layui.layer.getChildFrame('body', index);
                      body.find("#nick").val(nick);
                      body.find("#id").val(id);
                      body.find("#money").text(money);
                      body.find("#email").val(email);
                      body.find("#mobile").val(mobile);
                      body.find("#headimg").val(headimg);
                      body.find("#imgx1").attr('src', headimg);
                      body.find("input[name=status][value=1]").attr("checked", data['status'] == 1 ? true : false);
                      body.find("input[name=status][value=2]").attr("checked", data['status'] == 2 ? true : false);
                      form.render();
                  }
                  ,yes: function(index, layero){
                      var iframeWindow = window['layui-layer-iframe'+ index]
                          ,submitID = 'LAY-user-front-submit'
                          ,submit = layero.find('iframe').contents().find('#'+ submitID);
                      //监听提交
                      iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                          var field = data.field; //获取提交的字段
                          $.post(
                              "{:url('admin/User/editto')}",
                              field,
                              function(data,state){
                                  if(state != "success"){
                                      layer.msg("请求出错!");
                                  }else if(data.status == 1){
                                      table.reload('LAY-user-managet'); //数据刷新
                                      layer.msg('修改成功');
                                  }else{
                                      layer.msg(data.msg);
                                  }
                              }
                          );
                          layer.close(index); //关闭弹层
                      });
                      submit.trigger('click');
                  }
              });
          }
      });

    //事件
    var active = {
      del: function(){
          var checkStatus = table.checkStatus('LAY-user-managet')
              ,checkData = checkStatus.data; //得到选中的数据
          if(checkData.length === 0){
              return layer.msg('请选择数据');
          }
          var dataid='';
          for(var i=0;i<checkData.length;i++){
              dataid=dataid+','+checkData[i]['id'];
          }
          layer.confirm('确定删除选中数据吗？', function(index) {
              $.post(
                  "{:url('/admin/User/deluser')}",
                  {"id":dataid},
                  function(data,state){
                      if(state != "success"){
                          layer.msg("请求出错!");
                      }else if(data.status == 1){
                          table.reload('LAY-user-managet');
                          layer.msg('已删除');
                      }else{
                          layer.msg(data.msg);
                      }
                  }
              );
          });
          //
      },
      add: function(){
        layer.open({
          type: 2
          ,title: '添加新用户'
          ,content: 'edit.html'
          ,area: ['500px', '480px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
                var iframeWindow = window['layui-layer-iframe'+ index]
                ,submitID = 'LAY-user-front-submit'
                ,submit = layero.find('iframe').contents().find('#'+ submitID);
                //监听提交
                iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                    var field = data.field; //获取提交的字段
                $.post(
                    "{:url('admin/User/edit')}",
                    field,
                    function(data,state){
                        if(state != "success"){
                            layer.msg("请求出错!");
                        }else if(data.status == 1){
                            layer.msg('添加成功');
                        }else{
                            layer.msg(data.msg);
                        }

                    }
                );

              //提交 Ajax 成功后，静态更新表格中的数据
              //$.ajax({});              
              table.reload('LAY-user-managet');
              layer.close(index); //关闭弹层
            });  
            
            submit.trigger('click');
          }
        }); 
      }
    }  
    $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
  </script>
</body>
</html>

